// 做rem适配，使用 “浏览器宽度 / 80 + 'px'” 这个公式，得到html的font-size值
// 并且，当浏览器窗口改变大小的时候，重新计算这个值

// 计算font - size值
function setFont() {
    // 获取浏览器的宽度
    let htmlWidth = document.querySelector('html').clientWidth;
    // 找到临界点，判断最大宽度和最小宽度
    if (htmlWidth < 1024) htmlWidth = 1024;
    if (htmlWidth > 1920) htmlWidth = 1920;
    // 计算fontSize
    let fontSize = htmlWidth / 80 + 'px';
    // 把fontSize值，设置给html元素即可
    document.querySelector('html').style.fontSize = fontSize;
}

setFont(); // 刷新页面，马上计算font-size值

window.onresize = function() {
    setFont(); // 当浏览器窗口改变大小的时候，还要重新计算font-size值
    // 浏览器窗口改变，改变图表的大小
    myChart1.resize()
    myChart2.resize()
}
let myChart1, myChart2;
let name_arr = []
let value_arr = []
let money_arr = []

$('.top button').on('click', function() {
    let name = $('.top input').eq(0).val()
    let value = $('.top input').eq(1).val()
    let money = $('.top input').eq(2).val()
    console.log(name);
    let row = $(`
    <tr>
                    <td>${name}</td>
                    <td>${value}</td>
                    <td>${money}</td>
                </tr>
    `)
    $('.left table').append(row)
    name_arr.push(name)
    value_arr.push(value)
    money_arr.push(money)
    console.log(value_arr);
    aaa()
    zhu()
    name = $('.top input').eq(0).val('')
    value = $('.top input').eq(1).val('')
    money = $('.top input').eq(2).val('')
})

;

function aaa() {
    myChart1 = echarts.init($('.bigBox .right .top')[0])
    let option = {
        title: {
            text: '评分',
            textStyle: {
                color: 'orange',
                fontSize: '30'
            }
        },
        xAxis: {
            type: 'category',
            data: name_arr,
            axisTick: {
                alignWithLabel: true
            }
        },
        yAxis: {
            type: 'value',
            splitLine: {
                show: false,
            }

        },
        series: [{
            data: value_arr,
            type: 'line',
            smooth: true
        }]
    };
    myChart1.setOption(option)
};

function zhu() {
    myChart2 = echarts.init($('.bigBox .right .bottom')[0])
    let option = {
        title: {
            text: '薪资',
            textStyle: {
                color: 'skyblue',
                fontSize: '30'
            }
        },
        backgroundColor: '#0B1535',
        "textStyle": {
            "fontSize": 0,

        },
        "color": ["#00FCFF", "#FFDF1C", "#5AB72C", "#FF715A", "#2F9BFF"],
        "xAxis": {
            "nameTextStyle": {
                "color": "#c0c3cd",
                "padding": [0, 0, -10, 0],
                "fontSize": 14
            },
            "axisLabel": {
                "color": "#c0c3cd", //X轴文字
                "fontSize": 14,
                "interval": 0
            },
            "axisTick": {
                "lineStyle": {
                    "color": "#0B1535",
                    "width": 1
                },
                "show": true,
                alignWithLabel: true
            },
            "splitLine": {
                "show": false
            },
            "axisLine": {
                "lineStyle": {
                    "color": "#384267",
                    "width": 1,
                    "type": "dashed"
                },
                "show": true
            },
            "data": name_arr,
            "type": "category"
        },
        "yAxis": {
            "type": 'value',

            "nameTextStyle": {
                "color": "#c0c3cd",
                "padding": [0, 0, -10, 0],
                "fontSize": 14
            },
            "axisLabel": {
                "color": "#c0c3cd", //Y轴文字
                "fontSize": 14
            },
            "axisTick": {
                "lineStyle": {
                    "color": "#384267",
                    "width": 1
                },
                "show": true
            },
            "splitLine": {
                "show": true,
                "lineStyle": {
                    "color": "#384267",
                    "type": "line"
                }
            },
            "axisLine": {
                "lineStyle": {
                    "color": "#fff",
                    "width": 1,
                    "type": "line"
                },
                "show": true
            },
        },
        "series": [{
            "data": money_arr,
            "type": "bar",
            "barMaxWidth": "auto",
            "barWidth": 30,
            "itemStyle": {
                "color": {
                    "x": 0,
                    "y": 0,
                    "x2": 0,
                    "y2": 1,
                    "type": "linear",
                    "global": false,
                    "colorStops": [{
                        "offset": 0,
                        "color": "#00FCFF",
                    }, {
                        "offset": 1,
                        "color": "#0B1A39"
                    }]
                }
            },
            "label": {
                "show": true,
                "position": "top",
                "distance": 10,
                "color": "#fff",
                "position": [30, 10],
            }
        }, {
            "data": [0, 0, 0],
            "type": "pictorialBar",
            "barMaxWidth": "0",
            "symbol": "diamond",
            "symbolOffset": [0, 0],
            "symbolSize": [30, 15]
        }, {
            "data": money_arr,
            "type": "pictorialBar",
            "barMaxWidth": "20",
            "symbolPosition": "end",
            "symbol": "diamond",
            "color": ["#00FCFF", "#FFDF1C", "#5AB72C", "#FF715A", "#2F9BFF"],
            "symbolOffset": [0, "-50%"],
            "symbolSize": [30, 10],
            "zlevel": 4
        }, ],
        "tooltip": {
            "trigger": "axis",
            "show": false
        }
    }
    myChart2.setOption(option)
};